import React, { useState, useMemo } from "react";

// useCallback缓存的是整个函数
// useMemo缓存的是函数的返回值

// useCallback是可以改写成useMemo的，给函数嵌套一层
// useMemo是不能写成useCallback的

const App = () => {
  const [count, setCount] = useState(1);
  const [num, setNum] = useState(1);
  // useMemo的语法和useCallback一摸一样的，第一个参数是函数，第二个是依赖数组
  // useMemo的作用和vue的计算属性是一样
  const doubltCount = useMemo(() => {
    console.log(123);
    return count * 2;
  }, [count]);

  const [list] = useState([1, 2, 3, 4, 5, 6, 7]);
  const oddList = useMemo(() => {
    return list.filter((item) => item % 2);
  }, [list]);
  return (
    <>
      <h2>useMemo</h2>
      <p>count: {count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button>
      <p>doubltCount: {doubltCount}</p>
      <p>num: {num}</p>
      <button onClick={() => setNum((v) => v + 1)}>btn</button>

      <ul>
        {oddList.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
};

export default App;
